<template>
  <div class="v-eqpt-model-view">
    <c-row-crumb :title="multLang('title_aaab')"></c-row-crumb>
    <c-eqpt-model-view-head>
      <template #img>
        <div class="v-eqpt-model-view-img">
          <c-img :src="getImg"></c-img>
          <c-upload-single @change="iconChange">
            {{ multLang('btn_upload_a') }}
          </c-upload-single>
        </div>
      </template>
      <el-form
        :model="base.form"
        :rules="baseRules"
        ref="baseForm"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_asset_d', ':')"
              prop="model_name"
            >
              <c-form-edit :visible="baseVisible">
                <template #edit>
                  <el-input
                    v-model="base.form.model_name"
                    :placeholder="multLang('text_d')"
                  ></el-input>
                </template>
                <span>{{ base.form.model_name }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
        <c-row :col="4">
          <c-col>
            <el-form-item
              :label="multLang('title_asset_c', ':')"
              prop="category_id"
            >
              <c-form-edit :visible="baseVisible">
                <template #edit>
                  <c-cascader
                    v-model="base.form.category_id"
                    :options="assetTypeAllTree"
                    :placeholder="tplLang('text_choose_a', ['title_asset_c'])"
                  ></c-cascader>
                </template>
                <span>{{ assetTypeAllMap[base.form.category_id] }}</span>
              </c-form-edit>
            </el-form-item>
          </c-col>
        </c-row>
      </el-form>
      <template #opn>
        <c-row-view-opn
          :auth="true"
          :visible="baseVisible"
          @update:visible="base.visible = $event"
          @cancel="baseCancel"
          @save="baseSave"
        >
        </c-row-view-opn>
      </template>
    </c-eqpt-model-view-head>

    <c-tabs value="1" class="v-eqpt-model-view-body">
      <el-tab-pane :label="multLang('tab_info_a')" name="1">
        <c-roll transparent>
          <c-row-view :title="multLang('tab_info_a')">
            <template #opn>
              <c-row-view-opn
                :auth="true"
                :visible="infoVisible"
                @update:visible="info.visible = $event"
                @cancel="infoCancel"
                @save="infoSave"
              >
              </c-row-view-opn>
            </template>
            <!-- 
              :rules="infoRules" -->
            <el-form :model="info.form" ref="infoForm" label-width="120px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_mfr_a', ':')"
                    prop="org_id"
                  >
                    <c-form-edit :visible="infoVisible">
                      <template #edit>
                        <c-select
                          clearable
                          v-model="info.form.org_id"
                          :options="manufacturerList"
                          :placeholder="
                            tplLang('text_choose_a', ['title_mfr_a'])
                          "
                        ></c-select>
                      </template>
                      <span>{{ manufacturerMap[info.form.org_id] }}</span>
                    </c-form-edit>
                  </el-form-item>
                </c-col>

                <c-col :col="11">
                  <el-form-item
                    :label="multLang('title_note_a', ':')"
                    prop="remark"
                  >
                    <c-form-edit :visible="infoVisible" long>
                      <template #edit>
                        <c-input-text v-model="info.form.remark"></c-input-text>
                      </template>
                      <span>{{ info.form.remark }}</span>
                    </c-form-edit>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-row-view>
        </c-roll>
      </el-tab-pane>
      <el-tab-pane :label="multLang('tab_fault_a')" name="2">
        <c-eqpt-model-view-fault :data="fault.data"></c-eqpt-model-view-fault>
      </el-tab-pane>
      <el-tab-pane :label="multLang('tab_doc_a')" name="3">
        <c-eqpt-model-view-doc
          :info="data"
          :data="doc.data"
          @query="queryDoc"
        ></c-eqpt-model-view-doc>
      </el-tab-pane>
    </c-tabs>
  </div>
</template>
<script>
import {
  editAssetModel,
  getAssetModelDoc,
  getAssetModelFault,
  getAssetModelInfo
} from '@/http/api/v1/eqpt-model'
import CEqptModelViewHead from './mod/ViewHead.vue'
import CEqptModelViewFault from './mod/ViewFault.vue'
import CEqptModelViewDoc from './mod/ViewDoc.vue'
import { ObjectCopy } from '@/util'
import { getImg, upload } from '@/http/api/v1/file'
import { closeTag } from '@/util/router'
export default {
  name: 'VEqptModelView',
  components: {
    CEqptModelViewHead,
    CEqptModelViewFault,
    CEqptModelViewDoc
  },
  props: {},
  data() {
    return {
      icon: {
        form: {
          sectionType: 'modelIcon',
          id: '',
          icon: ''
        }
      },
      base: {
        visible: false,
        form: {
          sectionType: 'modelTop',
          id: '',
          model_name: '',
          category_id: ''
        }
      },
      info: {
        visible: false,
        form: {
          sectionType: 'modelBase',
          id: '',
          org_id: '',
          remark: ''
        }
      },
      doc: {
        data: []
      },
      fault: {
        data: []
      },
      id: '',
      data: {}
    }
  },
  computed: {
    assetTypeAllTree() {
      return this.optionTree('asset_type_all')
    },
    assetTypeAllMap() {
      return this.optionMap('asset_type_all')
    },
    manufacturerList() {
      return this.optionList('manufacturer')
    },
    manufacturerMap() {
      return this.optionMap('manufacturer')
    },
    baseRules() {
      return {
        model_name: {
          required: true,
          message: this.multLang('title_asset_d', 'msg_g'),
          trigger: 'blur'
        },
        category_id: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_asset_c']),
          trigger: 'change'
        }
      }
    },
    baseVisible() {
      return this.base.visible
    },
    infoVisible() {
      return this.info.visible
    },
    getImg() {
      return getImg(this.icon.form.icon)
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'asset_type_all' })
    this.setOption({ key: 'manufacturer' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    const {
      name,
      params: { id, edit }
    } = this.$route
    const cacheid = id || this.id
    if (cacheid) {
      this.id = cacheid
      this.query()
    } else {
      closeTag(name)
    }
    typeof edit === 'boolean' && (this.base.visible = edit)
    edit && (this.info.visible = false)
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    copyData(data, raw) {
      return ObjectCopy(data, raw, {
        skip: 'sectionType'
      })
    },
    iconChange(files) {
      upload({ files }).then(({ data }) => {
        this.icon.form.icon = data || ''
        editAssetModel({ ...this.icon.form })
      })
    },
    query() {
      this.queryInfo()
      this.queryDoc()
      this.queryFault()
    },
    queryInfo() {
      const { id } = this
      getAssetModelInfo({ id }).then(({ data }) => {
        this.data = data || {}
        this.copyData(this.icon.form, data)
        this.copyData(this.base.form, data)
        this.copyData(this.info.form, data)
        this.$nextTick().then(() => {
          this.$refs.baseForm.clearValidate()
          this.$refs.infoForm.clearValidate()
        })
      })
    },
    queryFault() {
      const { id } = this

      getAssetModelFault({ id }).then(({ data }) => {
        data && (this.fault.data = data.rows || [])
      })
    },
    queryDoc() {
      const { id } = this
      getAssetModelDoc({ id }).then(({ data }) => {
        data && (this.doc.data = data.rows || [])
      })
    },
    baseCancel() {
      ObjectCopy(this.base.form, this.data)
      this.base.visible = false
      this.$nextTick().then(() => this.$refs.baseForm.clearValidate())
    },
    baseSave() {
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          editAssetModel({ ...this.base.form }).then(() => {
            this.base.visible = false
            this.query()
          })
        }
      })
    },
    infoCancel() {
      ObjectCopy(this.info.form, this.data)
      this.info.visible = false
      this.$nextTick().then(() => this.$refs.infoForm.clearValidate())
    },
    infoSave() {
      editAssetModel({ ...this.info.form }).then(() => {
        this.info.visible = false
        this.query()
      })
    }
  }
}
</script>
<style lang="scss">
.v-eqpt-model-view {
  &-img {
    position: relative;
    .el-image {
      @include wh(80px, 80px);
    }
    .c-img {
      @include wh(80px, 80px);
    }
    .c-upload-single {
      width: 80px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #9bccff;
      cursor: pointer;
    }
  }
  &-body {
    height: calc(100% - 170px);
  }
}
</style>
